<template>
  <div class="app-container">

    <el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item style="margin-left: -20px" label="乘客姓名" prop="passengerName">
        <el-select
          v-model="queryParams.passengerName"
          filterable
          @change="handleChange"
        >
          <el-option
            v-for="item in ckXmOptions"
            :key="item.ckName"
            :label="item.ckName"
            :value="item.ckName"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: -10px" label="乘客证件号" prop="passengerIdCard">
        <el-select
          v-model="queryParams.passengerIdCard"
          filterable
        >
          <el-option
            v-for="item in ckIdCardOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: -25px" label="登机类型" prop="djLx">
        <el-select v-model="queryParams.djLx" clearable style="width: 120px">
          <el-option
            v-for="dict in dict.type.dj_lx"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-empty v-if="this.ckxlRepairInfo != null && this.ckxlRepairInfo.tpcsFjSm == '1' && this.ckxlRepairInfo.xlBmStatus == '0'"
              description="当前乘客行李已正常完成分拣扫码，无需补码"
    ></el-empty>

    <div v-else-if="this.ckxlRepairInfo != null && show && showRepairInfo">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-tag el-tag--warning">补码信息</span>
          <el-button v-if="this.ckxlRepairInfo.tpcsFjSm == '0' && this.ckxlRepairInfo.xlBmStatus == '0'" @click="repairScan"
                     style="float: right; padding: 3px 0" type="text"
          >
            人工补码
          </el-button>
          <span v-else-if="this.ckxlRepairInfo.xlBmStatus == '1'" style="float: right; padding: 3px 0;
          font-size: 14px; color: #008B8B" type="text">请使用手持扫码枪进行补码</span>
          <span v-else-if="this.ckxlRepairInfo.xlBmStatus == '2' && this.ckxlRepairInfo.tpcsFjSm == '1'" style="float: right; padding: 3px 0;
          font-size: 14px; color: #008B8B" type="text">当前行李已完成补码</span>
        </div>
        <el-descriptions title="" direction="vertical" :column="3" border>
          <el-descriptions-item label="乘客姓名">{{ this.ckxlRepairInfo.passengerName }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ this.ckxlRepairInfo.passengerNumber }}</el-descriptions-item>
          <el-descriptions-item label="证件号">{{ this.ckxlRepairInfo.passengerIdCard }}</el-descriptions-item>
          <el-descriptions-item label="航班号">{{ this.ckxlRepairInfo.flightNo }}</el-descriptions-item>
          <el-descriptions-item label="中转航班号">{{ this.ckxlRepairInfo.transferFlightNo }}</el-descriptions-item>
          <el-descriptions-item label="是否早到">{{ getZdStatus(this.ckxlRepairInfo.isArriveEarly) }}</el-descriptions-item>
          <el-descriptions-item v-if="this.ckxlRepairInfo.isArriveEarly =='1'"
                                label="上一节点：托盘出早到">{{ getCompleteStatus(this.ckxlRepairInfo.tpcsXlzdCzdJc) }}
          </el-descriptions-item>
          <el-descriptions-item v-if="this.ckxlRepairInfo.isArriveEarly =='0'"
                                label="上一节点：托盘传输分流检测">{{ getCompleteStatus(this.ckxlRepairInfo.tpcsFlJc) }}
          </el-descriptions-item>
          <el-descriptions-item
            label="当前节点：托盘传输分拣扫码">{{ getCompleteStatus(this.ckxlRepairInfo.tpcsFjSm) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!--  直达/中转  -->
    <el-empty v-else-if="this.ckxlRepairInfo != null && show && !showRepairInfo"
              description="当前乘客行李尚未到达分拣扫码点位"
    ></el-empty>

  </div>
</template>

<script>
import { selectRepairInfoByNickNameAndIdCard, getCkXmInfo, getCkIdCardByCkXm } from '@/api/ckxl/ck'
import { artificialRepair } from '@/api/ckxl/xl'

export default {
  name: 'Lable',
  dicts: ['dj_lx'],
  data() {
    return {
      // 查询参数
      queryParams: {
        passengerName: '',
        passengerIdCard: '',
        djLx: '0'
      },
      show: false,
      showRepairInfo:false,
      showRepairStatus:false,
      rules: {
        passengerName: [
          { required: true, message: '乘客姓名不能为空', trigger: 'blur' }
        ],
        passengerIdCard: [
          { required: true, message: '乘客证件号不能为空', trigger: 'blur' }
        ],
        djLx: [
          { required: true, message: "登机类型不能为空", trigger: "change" }
        ],
      },
      loading: false,
      //乘客行李补码信息
      ckxlRepairInfo: {},
      ckXmOptions: [{
        label:"",
        value:""
      }],
      ckIdCardOptions: [],
    }
  },
  watch: {
    '$store.state.user.peopleNum': {
      handler:function(newVal,oldVal){
        if(newVal != oldVal){
          this.queryParams.passengerName = '';
          this.queryParams.passengerIdCard = '';
          this.getCkBaseInfo();
        }
      }
    }
  },
  created() {
  },
  mounted() {
    this.queryParams.passengerName = '';
    this.queryParams.passengerIdCard = '';
    this.getCkBaseInfo();
  },
  computed: {},
  methods: {

    /** 搜索按钮操作 */
    handleQuery() {
      this.show = false
      this.showRepairInfo = false
      this.$refs['queryForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.getCkxlRepairInfo()
          this.loading = false
        }
      })
    },

    /** 查询乘客信息 */
    getCkxlRepairInfo() {
      this.fillCkIdCard();
      selectRepairInfoByNickNameAndIdCard(this.queryParams).then(response => {
        if (response.data != null) {
          this.ckxlRepairInfo = response.data
          this.getRepairInfoShow()
          this.show = true
        }
      })
    },

    // 获取真正的乘客证件号
    fillCkIdCard(){
      this.ckIdCardOptions.forEach(item => {
        if(item.label == this.queryParams.passengerIdCard){
          this.queryParams.passengerIdCard = item.value;
        }
      })
    },

    /** 补码 */
    repairScan() {
      var _this = this
      this.$modal.confirm('是否确认人工补码？').then(function() {
        const data = {
          'ckxlId': _this.ckxlRepairInfo.ckxlId
        }
        return artificialRepair(data)
      }).then(() => {
        this.$modal.msgSuccess('操作成功，请使用手持扫码枪进行补码！')
        this.handleQuery()
      }).catch(() => {
      })
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryIsTransfer = ''
      this.show = false
      this.showRepairInfo = false
      this.ckXmOptions = [];
      this.ckIdCardOptions = [];
    },

    /** 获取人工补码状态 */
    getRepairInfoShow(){
      if(this.ckxlRepairInfo.isArriveEarly == '1' && this.ckxlRepairInfo.tpcsXlzdCzdJc == '0'){
        this.showRepairInfo = false;
      }else if(this.ckxlRepairInfo.isArriveEarly == '0' && this.ckxlRepairInfo.tpcsFlJc == '0'){
        this.showRepairInfo = false;
      }else if(this.ckxlRepairInfo.isArriveEarly == '1' && this.ckxlRepairInfo.tpcsXlzdCzdJc == '1'){
        this.showRepairInfo = true;
      }else if(this.ckxlRepairInfo.isArriveEarly == '0' && this.ckxlRepairInfo.tpcsFlJc == '1'){
        this.showRepairInfo = true;
      }
    },

    // 防抖处理（500ms内仅触发一次）
    getCkBaseInfo() {
      getCkXmInfo().then(response => {
        if (response.data != null) {
          this.ckXmOptions = response.data
        }
      }).catch(() => {
        this.ckXmOptions = [];
      });
    },

    //选中乘客姓名
    handleChange(value){
      this.getCkIdCard(value);
    },

    //根据乘客姓名查询乘客身份证id
    getCkIdCard(ckName){
      getCkIdCardByCkXm(ckName).then(response => {
        this.ckIdCardOptions = [];
        if (response.data != null) {
          response.data.forEach(item => {
              this.ckIdCardOptions.push({
                'label': this.formatIdCard(item.idCard),
                'value': item.idCard
              })
            }
          )
          this.queryParams.passengerIdCard = this.ckIdCardOptions[0].label;
        }
      }).catch(() => {
        this.ckIdCardOptions = [];
      });
    },

    // 格式化显示身份证号（如：410*****123456）
    formatIdCard(idCard) {
      if(idCard != null){
        return idCard.replace(/(\d{4})\d+(\d{6})/, '$1*****$2');
      }
    },

    //早到字典转义
    getZdStatus(isArriveEarly){
      if(isArriveEarly == '0'){
        return '否';
      }else if(isArriveEarly == '1'){
        return '是';
      }
    },

    //获取完成状态
    getCompleteStatus(completeStatus){
      if(completeStatus == '0'){
        return '未完成';
      }else if(completeStatus == '1'){
        return '已完成';
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
</style>
